<p>
	Yjsg v2 is equipped with mobile first, responsive grid system layout that can be used in any Joomla pages extensions or modules.<br/>
	To take advnatage of this grid system just add <code>yjsg-row</code> container and inside you can have up to 8 column blocks.<br/>
	The examples below display the usage that is suitable for any page layout.
</p>
<div class="yjsg-row">
	<div class="yjsg-col-1">
		<h3 class="yjsg-sub-heading">markup:</h3>
		[yjsgpre pretty="1" scroll="0"]
		<div class="yjsg-row">
			<div class="yjsg-col-1-2"> content... </div>
			<div class="yjsg-col-1-2"> content... </div>
		</div>
		[/yjsgpre] </div>
</div>


<h3 class="yjsg-sub-heading">examples:</h3>
<div class="yjsg-row">
	<div class="yjsg-col-1">
		<span class="yjsg-sub-heading">yjsg-col-1</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-2">
		<span class="yjsg-sub-heading">yjsg-col-1-2</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-2">
		<span class="yjsg-sub-heading">yjsg-col-1-2</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-3">
		<span class="yjsg-sub-heading">yjsg-col-1-3</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-3">
		<span class="yjsg-sub-heading">yjsg-col-1-3</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-3">
		<span class="yjsg-sub-heading">yjsg-col-1-3</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-4">
		<span class="yjsg-sub-heading">yjsg-col-1-4</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-4">
		<span class="yjsg-sub-heading">yjsg-col-1-4</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-4">
		<span class="yjsg-sub-heading">yjsg-col-1-4</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-4">
		<span class="yjsg-sub-heading">yjsg-col-1-4</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-5">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-5">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-5">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-5">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-5">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-6">
		<span class="yjsg-sub-heading">yjsg-col-1-6 </span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-6">
		<span class="yjsg-sub-heading">yjsg-col-1-6 </span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-6">
		<span class="yjsg-sub-heading">yjsg-col-1-6 </span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-6">
		<span class="yjsg-sub-heading">yjsg-col-1-6 </span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-6">
		<span class="yjsg-sub-heading">yjsg-col-1-6 </span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-6">
		<span class="yjsg-sub-heading">yjsg-col-1-6 </span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-8">
		<span class="yjsg-sub-heading">yjsg-col-1-8</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-8">
		<span class="yjsg-sub-heading">yjsg-col-1-8</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-8">
		<span class="yjsg-sub-heading">yjsg-col-1-8</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-8">
		<span class="yjsg-sub-heading">yjsg-col-1-8</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-8">
		<span class="yjsg-sub-heading">yjsg-col-1-8</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-8">
		<span class="yjsg-sub-heading">yjsg-col-1-8</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-8">
		<span class="yjsg-sub-heading">yjsg-col-1-8</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-8">
		<span class="yjsg-sub-heading">yjsg-col-1-8</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-2-5">
		<span class="yjsg-sub-heading">yjsg-col-2-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-3-5">
		<span class="yjsg-sub-heading">yjsg-col-3-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-4-5">
		<span class="yjsg-sub-heading">yjsg-col-4-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-5">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-3-4">
		<span class="yjsg-sub-heading">yjsg-col-3-4</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-4">
		<span class="yjsg-sub-heading">yjsg-col-1-4</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-2-3">
		<span class="yjsg-sub-heading">yjsg-col-2-3</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-3">
		<span class="yjsg-sub-heading">yjsg-col-1-3</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-4">
		<span class="yjsg-sub-heading">yjsg-col-1-4</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-4">
		<span class="yjsg-sub-heading">yjsg-col-1-4</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-2">
		<span class="yjsg-sub-heading">yjsg-col-1-2</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-4">
		<span class="yjsg-sub-heading">yjsg-col-1-4</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-2">
		<span class="yjsg-sub-heading">yjsg-col-1-2</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-4">
		<span class="yjsg-sub-heading">yjsg-col-1-2</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-5">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-5">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-3-5">
		<span class="yjsg-sub-heading">yjsg-col-3-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>


<div class="yjsg-row">
	<div class="yjsg-col-1-5" data-scroll-reveal="enter left over 1s and move 200px after 0.05s">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-3-5" data-scroll-reveal="enter top over 1s and move 200px after 0.05s">
		<span class="yjsg-sub-heading">yjsg-col-3-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
	<div class="yjsg-col-1-5" data-scroll-reveal="enter right over 1s and move 200px after 0.05s">
		<span class="yjsg-sub-heading">yjsg-col-1-5</span>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipisciaoreet dolore magnpo consequat.
			Dum iriure dolor in hendrerit in vu t tte feugait nulla facilisi.
		</p>
	</div>
</div>
